{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '编辑器:example/editor/index', 'wangeditor'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">富文本编辑器 wangeditor</div>
        </header>
        <div class="card-body">
        
        <p>这里示例使用的版本是3.3.1，对其css做了相应的调整</p>
        <form action="#!" method="post" id="example-from">
          <div class="mb-3">
            <div id="testtextarea" name="testcontent"><p>欢迎使用 wangEditor 富文本编辑器</p></div>
          </div>
        </form>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    var editor;
    var myLayerIndex;
    function showLocalImage(){
        myLayerIndex = open_layer('选择图片', "{:url('attachment/index/index')}?iframe=1&callback=receiveDataForEditor&multiple=1", function (){});
    }
    function receiveDataForEditor(url){
        layer.close(myLayerIndex);
        var arr = url.split(',');
        var dom = '';
        for (var i = 0; i < arr.length; i++) {
            dom += '<p><img src="' + arr[i] + '"><br></p>';
        }
        editor.cmd.do('insertHTML', dom);
    }
    $(function(){
        var E = window.wangEditor;
        editor = new E('#testtextarea');
        editor.customConfig.uploadImgServer = '/data/upload.php?type=wangeditor'; 
        editor.create();
        $('#' + editor.imgMenuId).on('click', function(){
            setTimeout(function (){
                $('.w-e-up-img-container').html(`<div class="w-e-up-btn" onclick="showLocalImage();"><i class="w-e-icon-upload2"></i></div>`);
            }, 200);
        });
    })

    </script>